<template>
    <div class="wrapper">
		<!--<div>111{{SearchKey}}</div>-->
		<el-form>
			<el-form-item label="价格筛选: ">
				<el-input v-model="formData.minPrice" placeholder="最低价格" style="width: 80px; margin-right: 20px;"></el-input>
				-
				<el-input v-model="formData.maxPrice" placeholder="最高价格" style="width: 80px; margin-left: 20px;"></el-input>
				<el-button type="primary" plain style="margin-left: 20px;background-color: #f1cb93;color:oldlace">确认</el-button>
			</el-form-item>
			<el-form-item label="筛选排序: " >
				<el-link :underline="false" style="margin-right: 10px;">销量</el-link>
				<el-popover
					trigger="hover"
					title="排序方式"
					:width="80"
				>
					<template #reference>
						<el-link :underline="false">价格</el-link>
					</template>
					<el-link :underline="false">从低到高排序</el-link>
					<el-link :underline="false">从高到低排序</el-link>
				</el-popover>
			</el-form-item>
		</el-form>

		<div class="goods" v-for="(row, index) in chunkedData" :key="index" 
			style="display: flex;flex-direction: row;">
			<el-card style="max-width: 240px;flex: 0 0 20%;" 
				@click="goGoodsInfo1(item)"
    			v-for="item in row" 
    			:key="item.id"
      			>
      			<img
        			:src="item.url"
        			style="width: 100%; height: 190px;"
      			/>
      			<template #footer>
        			<div > 
          				<span class="price-icon">￥</span>
          				<span class="price">{{ item.price }}</span>
          				<br/>
          				<span>{{ item.title }}</span>
        			</div>
      				</template>
    		</el-card>
		</div>
		
		<el-pagination 
			background 
			layout="total, sizes, prev, pager, next, jumper"
			:total="40"
			v-model:current-page="params.pageNo"
			style="margin-top:120px;"
		></el-pagination>
    </div>
</template>

<script setup>
import { onMounted, ref,reactive,computed } from 'vue'
import { get } from '@/plugins/axios'
import { useRoute,useRouter } from 'vue-router';
const route = useRoute()
const SearchKey = ref('')
const router = useRouter()

const goGoodsInfo= ()=>{
	router.push('/goodsInfo')
}

onMounted(()=>{
	SearchKey.value=route.query.SearchKey
})

// 商品信息跳转方法
const goGoodsInfo1 = (item) => {
	console.log(item)
	router.push({
  		path: '/goodsInfo',
  		query: { item: JSON.stringify(item) }
	});
}

const formData = reactive({
	maxPrice: '',
	minPrice: '',
	priceOrder: null,
	salesOrder: null
})
const params = reactive({
	pageNo: 1,
	pageSize: 5
})
 // 计算属性，将tlData分成每行5个元素的二维数组
const chunkedData = computed(() => {
    const chunks = [];
    const chunkSize = 5;
    for (let i = 0; i < tlData.length; i += chunkSize) {
      chunks.push(tlData.slice(i, i + chunkSize));
    }
    return chunks;
});


const tlData= [
  {
    id: 1,
	url: new URL("@/assets/images/good1.jpg",import.meta.url).href,
    price: 179.28,
    title: '燕窝血耳果胶',
    detal:'燕窝血耳,源自高山，营养丰富',
    url1:new URL("@/assets/images/血耳2.png",import.meta.url).href,
    url2:new URL("@/assets/images/good2-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good2-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good2-4.png",import.meta.url).href
  },
  {
    id: 2,
    url: new URL("@/assets/images/good44.png",import.meta.url).href,
    price: 11.30,
    title: '保康血耳湿纸巾',
    detal:'',
    url1:new URL("@/assets/images/good2-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good2-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good2-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good2-4.png",import.meta.url).href
  },
	{
    id: 3,
    url: new URL("@/assets/images/good22.png",import.meta.url).href,
    price: 28.59,
    title: '保康血耳精油',
    detal:'',
    url1:new URL("@/assets/images/good2-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good2-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good2-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good2-4.png",import.meta.url).href
    },
		{
    id: 4,
    url: new URL("@/assets/images/good33.png",import.meta.url).href,
    price: 25.64,
    title: '保康血耳香皂',
    detal:'',
    url1:new URL("@/assets/images/good2-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good2-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good2-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good2-4.png",import.meta.url).href
    },
		{
    id: 5,
    url: new URL("@/assets/images/good11.png",import.meta.url).href,
    price: 88.50, 
    title:'即食型血耳莲子羹',   
    detal:'',
    url1:new URL("@/assets/images/good3-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good3-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good3-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good3-4.png",import.meta.url).href
    },
		{
    id: 6,
    url: new URL("@/assets/images/good6.jpg",import.meta.url).href,
    price: 49.00,
    title: '血耳珍珠滋养霜',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
  },
	{
    id: 7,
    url: new URL("@/assets/images/good7.jpg",import.meta.url).href,
    price: 23.00,
    title: '血耳雪梨糖水',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
  },
	{
    id: 8,
    url: new URL("@/assets/images/good8.jpg",import.meta.url).href,
    price: 19.00,
    title: '小吊梨血耳茶',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
        },
		{
          id: 9,
          url: new URL("@/assets/images/good9.jpg",import.meta.url).href,
          price: 228.00,
          title: '金丝耳燕耳血耳',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
        },
		{
          id: 10,
          url: new URL("@/assets/images/good2-3.png",import.meta.url).href,
          price: 36.00,
          title: '血耳百合植物饮品',
    detal:'',
    url1:new URL("@/assets/images/good2-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
        },
		{
          id: 11,
          url: new URL("@/assets/images/good11.avif",import.meta.url).href,
          price: 12.90,
          title: '活鲜家用糯雪耳',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
        },
		{
          id: 12,
          url: new URL("@/assets/images/good12.avif",import.meta.url).href,
          price: 24.78,
          title: '易糯雪耳450g',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
        },
		{
          id: 13,
          url: new URL("@/assets/images/good13.avif",import.meta.url).href,
          price: 26.81,
          title: '新鲜特级干货500g雪耳孕妇糯耳银耳莲子羹',
    detal:'',
    url1:new URL("@/assets/images/good1-1.png",import.meta.url).href,
    url2:new URL("@/assets/images/good1-2.png",import.meta.url).href,
    url3:new URL("@/assets/images/good1-3.png",import.meta.url).href,
    url4:new URL("@/assets/images/good1-4.png",import.meta.url).href
  }
]
</script>

<style lang="scss" scoped>
$tableBorder: 2px solid #f1cb93;
.wrapper{
	width: 1160px;
	margin: 50px auto;
	.el-form{
		border: $tableBorder;
		.el-form-item{
			padding: 6px;
			margin-bottom: 0;
			border: $tableBorder;
		}
	}
	.goods{
		width:100%;
		margin-top: 40px;
		.el-card:hover{
			cursor: pointer;
		}
	}
}
.el-card{
	width: 240px;
	max-height: 350px;
	margin: 1px;
}
.price-icon{
	color: #ff6200;
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
}
.price{
	color: #ff6200;
	font-size: 24px;
	font-weight: 700;
	line-height: 36px;
}
</style>